<template>
	<view class="content">
		<view class="content-top">
			<view class="content-top-left">
				取消
			</view>
			<view class="content-top-right">
				<button size="default" type="default" style="color:#ffffff;backgroundColor:#cee9ff;borderColor:#1AAD19"
					hover-class="is-hover">发布</button>
			</view>
		</view>
		<view class="content-footer">
			<view class="content-footer-left">
				<view class="content-footer-left-top">
					这一刻的想法...
				</view>
				<view class="content-footer-left-down">
					+
				</view>
			</view>
			<view class="content-footer-right">
				<view class="right-left">
					<view class="right-left-icon">
						<img src="../../static/主题.png" alt="" class="right-image">
						<view class="">
							选择主题
						</view>
					</view>
					<view class="right-left-text">
						<view class="uni-list">
							<view class="uni-list-cell">

								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input">{{array[index]}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="right-whole">
					<view class="right-left-a">
						<view class="right-left-icon">
							<img src="../../static/标签.png" alt="" class="right-image">
						</view>
						<view class="right-left-text">
							<view class="uni-list">
								<view class="uni-list-cell">
					
									<view class="uni-list-cell-db">
										<picker @change="bindPickerChange" :value="index" :range="array">
											<view class="uni-input">{{zhuti[index]}}</view>
										</picker>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="right-whole">
					<view class="right-left">
						<view class="right-left-icon">
							<img src="../../static/qipao.png" alt="" class="right-image">
							<view class="">
								是否开启评论功能
							</view>
						</view>
						<view class="uni-list">
									<view class="uni-list-cell uni-list-cell-pd">
										<view class="uni-list-cell-db"></view>
										<switch checked />
									</view>
									
							</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'picker',
				array: ['中国', '美国', '巴西', '日本'],
				zhuti:['主题'],
				index: 0,

			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			}
		}
	}
</script>

<style>
	.content-top {
		padding: 4px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content-footer-left {
		padding: 4px;
	}

	.content-footer-left-top {
		color: darkgray;
		margin-bottom: 10px;
	}

	.content-footer-left-down {
		background-color: c;
		width: 100px;
		height: 100px;
		font-size: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uni-list-cell {
		display: flex;
		justify-content: space-between;
		padding: 4px;
	}

	.right-image {
		width: 30px;
		height: 30px;
	}
	.right-left{
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		padding-top: 10px;
		padding-bottom: 10px;

		
	}
	
	.right-left-a{
		display: flex;
		margin-top: 10px;
		padding-top: 10px;
		
	}
	.right-left-icon{
		display: flex;
		align-items: center;
	}
</style>